<template>
  <div class="detail-container">
    <div class="top-wrapper">
      <div class="org-detail">
        <div class="avatar">
          <el-avatar shape="square" :size="80">LOGO</el-avatar>
        </div>
        <div class="org-info">
          <div class="i-top">
            <div class="t-left">
              <span class="title">云上数联（贵州）信息技术有限公司</span>
              <el-tag effect="plain" class="tagItem" size="small" type="info">民营企业</el-tag>
            </div>
            <div class="t-right">
              <el-tag class="tagItem" size="small" type="danger">存在风险场所</el-tag>
              <el-tag class="tagItem" size="small" type="warning">申领人与法人非同一人</el-tag>
            </div>
          </div>
          <div class="info-detail label-color">
            <div>法定代表人：张九龄</div>
            <div>法定代表人身份证号：5222xxxxxx3434</div>
            <div>统一社会信用代码：234298374LSD23</div>
          </div>
          <div class="info-detail label-color">
            注册地址：贵州省贵阳市双龙航空漢可以轻松的工业原料
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-wrapper">
      <div class="title">预警列表</div>
      <div class="sta-data">
        <div class="item">
          <div class="title">今日预警</div>
          <div class="total">累计预警 {{stat.test1 | numFormat}} 个</div>
          <div class="today">
            <div class="val">{{stat.test2 | numFormat}}<span> 个</span></div>
            <div class="increase">较昨日 
              <span v-if="stat.test3 < 0" class="down"><i class="el-icon-caret-bottom"></i>{{stat.test3 | numToPercent}}</span>
              <span v-else class="up"><i class="el-icon-caret-top"></i>{{stat.test3 | numToPercent}}</span>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title">今日红色预警</div>
          <div class="total">累计红色预警 {{stat.test4 | numFormat}} 个</div>
          <div class="today">
            <div class="val">{{stat.test5 | numFormat}}<span> 个</span></div>
            <div class="increase">较昨日 
              <span v-if="stat.test6 < 0" class="down"><i class="el-icon-caret-bottom"></i>{{stat.test6 | numToPercent}}</span>
              <span v-else class="up"><i class="el-icon-caret-top"></i>{{stat.test6 | numToPercent}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="table-data">
        <div class="filter-container">
          预警类型：
          <el-input placeholder="请输入场所名称" size="small"
                    class="filter-item search-item" v-model="searchObj.csName"/>
          机构名称：
          <el-input size="small" placeholder="所属机构名称"
                    class="filter-item search-item" v-model="searchObj.orgName"/>
          预警时间：
          <el-date-picker
            size="small"
            :range-separator="null"
            start-placeholder="请选择时间"
            class="filter-item search-item date-range-item"
            format="yyyy-MM-dd"
            type="datetimerange"
            v-model="searchObj.timeRange"
            value-format="yyyy-MM-dd"
          />
          <el-button size="small" @click="search" class="filter-item" type="primary">
            查询
          </el-button>
          <el-button size="small" @click="reset" class="filter-item">
            重置
          </el-button>
        </div>
        <el-table
          size="medium"
          :data="tabItems"
          ref="table"
          style="width: 100%;"
          v-loading="tabLoading"
        >
          <el-table-column label="姓名" align="center"
            prop="test1"
          />
          <el-table-column label="身份证号" align="left"
            prop="test2"
          />
          <el-table-column label="联系电话" align="left"
            prop="test3"
          />
          <el-table-column label="扫码预警时间" align="left"
            prop="test4"
            min-width="80px"
          />
          <el-table-column label="健康码颜色" align="center"
            prop="test5"
            min-width="100px"
          />
          <el-table-column label="预警信息" align="center"
            prop="test6"
            min-width="100px"
          />
          <el-table-column label="状态" align="center"
            prop="test7"
            min-width="100px"
          />
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="dealDetail(scope.row)">处置</el-button>
              <el-button
                size="mini"
                type="text"
                @click="deleteItem(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-box">
          <el-pagination
            :background="true"
            :current-page="pagination.currentPage"
            :page-size="pagination.pageSize"
            :page-count="pagination.pageCount"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>

        <DealForm 
          ref="edit"
          :type="dialog.type"
          :dialog-visible="dialog.isVisible"
          @close="editClose"
        />
      </div>
    </div>
  </div>
</template>

<script>
import DealForm from '@/components/fk/placeForewarning/DealForm.vue';
export default {
  name: 'PlaceForewarningDetail',
  components: {DealForm},
  data() {
    return {
      // 编辑框
      dialog:{
        isVisible: false,
        type: 'edit'
      },
      stat:{
        test1: 6546456, 
        test2: 34534, 
        test3: 0.78,
        test4: 2342, 
        test5: 232,
        test6: -0.46
      },
      tabLoading: false,
      tableKey: 0,
      pageItems: 10, // 每页查询条数
      pagination: {
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示条数
        pageCount: 1, // 总页数
      },
      tabItems: [{
        id: 1,
        test1: '李三',
        test2: '522128199208043622',
        test3: '13312345678',
        test4: '2020-04-14  16:08:55',
        test5: '黄色',
        test6: '黄色重点人扫场所码',
        test7: '未处理'
      }],
      searchObj: this.initSearchObj(),
    }
  },
  mounted(){
    // this.getData(1, this.pageItems, {}, {})
  },
  methods:{
    initSearchObj(){
      return {
        csName: '',
        orgName: '',
        timeRange: [],
        areaIds: []
      }
    },
    getSearchObj(){
      let obj = this.searchObj;
      const ids = obj.areaIds;
      if(ids && ids.length > 0){
        obj.areaCode = ids[ids.length-1]
      }
      return obj;
    },
    getExtraObj(){
      let obj = this.searchObj;
      let extra = {};
      if(obj.timeRange && obj.timeRange.length == 2 ){
        extra.createTime_le = obj.timeRange[0]
        extra.createTime_ge = obj.timeRange[1]
      }
      return extra
    },
    search(){
      this.getData(1, this.pageItems, this.getSearchObj(), this.getExtraObj())
    },
    reset(){
      this.searchObj = this.initSearchObj()
       this.getData(1, this.pageItems, {}, {})
    },
    getData(current , size, model, extra){
      let requestData = {
        current,
        size,
        model,
        extra
      }
      this.tabLoading = true;
      this.$postJson(selectCsInfoPage, requestData).then(res => {
        this.tabLoading = false;
        if(res){
          const pagination = {
            currentPage: parseInt(res.current), // 当前页面号
            pageSize: parseInt(res.size), // 每页条目数
            pageCount: parseInt(res.pages), // 总页面数
          }
          this.pagination = pagination;
          this.tabItems = res.records;
        }
      })
    },
    async handleCurrentChange(val) {
      await this.getData(val, this.pageItems, this.getSearchObj(), this.getExtraObj())
    },
    async handleSizeChange(val) {
      this.pageItems = val
      await this.getData(1, this.pageItems, this.getSearchObj(), this.getExtraObj())
    },
    itemDetail(item){
      this.$router.push({
        path: "/csm/csmManageDetail",
        query: {id: item.id}
      })
    },
    dealDetail(item){
      this.$refs.edit.setEditObj(item)
      this.dialog = {
        isVisible: true,
        type: 'edit'
      }
    },
    editClose() {
      this.dialog.isVisible = false;
    },
    deleteItem(item){
      this.$confirm('是否删除预警信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteUserSubmit(item)
      });
      console.log(item);
    },
    deleteUserSubmit(item){
      this.$message({
        type: 'success',
        message: '删除成功!'
      });
      // const requestData = {
      //   id: item.id
      // }
      // this.$postJson(reqUrl1, requestData).then(res => {
      //   if(res){
      //     this.$message({
      //       type: 'success',
      //       message: '删除成功!'
      //     });
      //     this.getData(1, this.pageItems, this.searchObj)
      //   }
      // })
    }
  }
}
</script>
<style lang="scss" scoped>

.detail-container{
  margin: 10px;
}
.top-wrapper{
  background: #fff;
  padding: 20px;

  .org-detail{
    display:flex;
    display: -webkit-flex;
  }
}

.org-info{
  flex: 1;
  margin-left: 1rem;
  
  .i-top{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;

    .title{
      font-weight: 700;
    }
    .tagItem{
      margin-left:1rem;
    }
  }
  .info-detail{
    font-size: 14px;
    display: flex;
    display: -webkit-flex;
    margin-top: 0.4rem;
    div:first-child{
      padding-right: 1rem;
    }
    div:not(:first-child){
      padding: 0 1rem;
      border-left: 1px solid #ced6e0;
    }
  }
}

.bottom-wrapper{
  margin-top: 1rem;
  background-color: #fff;
  padding: 1rem;

  .title{
    font-weight: 900;
    margin: 13px 0;
  }
}

.sta-data{
  display: flex;
  display: -webkit-flex;
  margin-bottom: 1rem;
  .item{
    flex: 1;
    background-color: #f1f2f6;
    border-radius: 5px;
    // box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-right: 15px;
    
    .title{
      font-weight: bold;
    }

    .total{
      color: #979fb9;
      margin-top: 7px;
    }

    .today{
      margin-top: 15px;
      display: flex;
      align-items: center;
      .val{
        flex: 6;
        font-size: 2rem;
        font-weight: bold;

        span{
          font-size: 0.9rem;
          font-weight: normal;
        }
      }

      .increase{
        flex: 4;
        color: #979fb9;
        font-size: 0.8rem;
        text-align: right;
        .up{
          color: #44d196;
        }

        .down{
          color: #d14444;
        }
      }
    }
  }
}

  

</style>